<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>vue3.2.31 element-plus fetch (get/head) post put delete</title>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/element-plus/dist/index.css">
    <!-- https://v3.cn.vuejs.org/ -->
    <script src="https://unpkg.com/vue@next"></script>
    <script src="//cdn.jsdelivr.net/npm/element-plus"></script>
    <style>
        .el-row{
            margin:5px 0;
        }

        .demo-date-picker {
            display: flex;
            width: 100%;
            padding: 0;
            flex-wrap: wrap;
        }
        .demo-date-picker .block {
            padding: 30px 0;
            text-align: center;
            border-right: solid 1px var(--el-border-color);
            flex: 1;
        }
        .demo-date-picker .block:last-child {
            border-right: none;
        }
        .demo-date-picker .demonstration {
            display: block;
            color: var(--el-text-color-secondary);
            font-size: 14px;
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
<div id="app">
    <el-row class="mb-4">
        <el-button @click="get">fetch-get</el-button>
        <el-button @click="post" type="primary">fetch-post</el-button>
        <el-button @click="put" type="success">fetch-put</el-button>
        <el-button @click="del" type="info">fetch-delete</el-button>
        <el-button @click="gt" type="warning">fetch get head请求</el-button>
        <el-button type="danger">Danger</el-button>
        <el-button>中文</el-button>
    </el-row>

    <el-row class="mb-4">
        <el-button plain>Plain</el-button>
        <el-button type="primary" plain>Primary</el-button>
        <el-button type="success" plain>Success</el-button>
        <el-button type="info" plain>Info</el-button>
        <el-button type="warning" plain>Warning</el-button>
        <el-button type="danger" plain>Danger</el-button>
    </el-row>
    <hr>
    <h3>Hello World Vue [{{ver}}] </h3>
    <p>{{3 * 3}}</p>
    <h3>{{true ? 'yes' : 'no'}}</h3>
    <button @click="get">get</button>
    <button @click="post">post</button>
    <button @click="put">put</button>
    <button @click="del">delete</button>
</div>
<script>
    let app = Vue.createApp({
        data() {
            return {
                ver: Vue.version,
                value:new Date(),
                account:'',
                password:'',
                value1:new Date(),
            }
        },
        methods: {
            get() {
                fetch('http://localhost/api/t1',{method:'get'}).then(res=>res.text()).then(res=>{
                    console.log(res)
                }).catch(err=>{
                    console.error(err)
                })
            },
            post() {
                let id = 99
                let name =  '李勇'
                fetch('http://localhost/api/t3',{
                    method:'post',
                    //body:'id=66&name=李四&addr=河南省郑州市',
                    body:JSON.stringify({id,name}),  //{"id":99,"name":"李勇"}
                    //headers:{'Content-Type':'application/x-www-form-urlencoded'}

                    //默认的，服务器处理 req.getReader().readLine() id=66&name=ssss...
                    headers:{'Content-Type': 'text/plain;charset=UTF-8'}
                }).then(res=>res.json()).then(res=>{
                    //console.log(res)
                    ElementPlus.ElMessage({
                        type:'success',
                        message:res.msg
                    })
                }).catch(err=>{
                    console.error(err)
                })
            },
            put() {
                let id = 199
                let name =  '1李勇'
                fetch('http://localhost/api/t3',{
                    method:'put',
                    body:JSON.stringify({id,name}),  //{"id":99,"name":"李勇"}
                    //headers:{'Content-Type':'application/x-www-form-urlencoded'}

                    //默认的，服务器处理 req.getReader().readLine() id=66&name=ssss...
                    headers:{'Content-Type': 'text/plain;charset=UTF-8'}
                }).then(res=>res.json()).then(res=>{
                    //console.log(res)
                    ElementPlus.ElMessage({
                        type:'success',
                        message:res.msg
                    })
                }).catch(err=>{
                    console.error(err)
                })
            },
            del() {
                let id = 111
                let name =  'del李勇'
                fetch('http://localhost/api/t3',{
                    method:'delete',
                    //ajax get head 不可以有body
                    body:JSON.stringify({id,name}),  //{"id":99,"name":"李勇"}
                    //headers:{'Content-Type':'application/x-www-form-urlencoded'}

                    //默认的，服务器处理 req.getReader().readLine() id=66&name=ssss...
                    //headers:{'Content-Type': 'text/plain;charset=UTF-8'}
                }).then(res=>res.json()).then(res=>{
                    //console.log(res)
                    ElementPlus.ElMessage({
                        type:'info',
                        message:res.msg
                    })
                }).catch(err=>{
                    console.error(err)
                })
            },
            gt() {
                let id = 111
                let name =  'del李勇'
                fetch('http://localhost/api/t3?id=111&name=gethead李勇',{
                    method:'get',
                    //ajax get head 不可以有body
                    //body:JSON.stringify({id,name}),  //{"id":99,"name":"李勇"}
                    //headers:{'Content-Type':'application/x-www-form-urlencoded'}

                    //默认的，服务器处理 req.getReader().readLine() id=66&name=ssss...
                    //headers:{'Content-Type': 'text/plain;charset=UTF-8'}
                }).then(res=>res.json()).then(res=>{
                    //console.log(res)
                    ElementPlus.ElMessage({
                        type:'warning',
                        message:res.msg
                    })
                }).catch(err=>{
                    console.error(err)
                })
            },
        }
    })
    app.use(ElementPlus,{locale: 'zhCn'})
    app.mount('#app')
</script>
</body>
</html>
